<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{/common/header::header-head}">
    <style>
        body{
            background-image: url("https://img2.baidu.com/it/u=548276818,366305342&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-repeat: repeat-x;
            background-repeat: repeat-y;
            background-attachment: fixed;
        }
    </style>
</head>
<body>
<div th:replace="~{/common/header::header-body}"></div>

<div class="container mt-3 text-justify-center">
    <a th:href="@{/back/article/add}" type="button" class="btn btn-primary">新增文章</a>
    <table class="table table-striped">
        <thead>
        <tr>
            <th>文章标题</th>
            <th>创建时间</th>
            <th>分类标签</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="article:${articles}">
            <td th:text="${article.getTitle()}">1</td>
            <td th:text="${#dates.format(article.getDate())}">2</td>
            <td th:text="${article.getCategory()}">3</td>
            <td>
                <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#myModal">详情</button>

                <!-- 模态框显示文章详情 -->
                <div class="modal fade" id="myModal">
                    <div class="modal-dialog">
                        <div class="modal-content">

                            <!-- 模态框头部 -->
                            <div class="modal-header">
                                <h4 class="modal-title" th:text="${article.getTitle()}">模态框标题</h4>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>

                            <!-- 模态框内容 -->
                            <div class="modal-body" th:text="${article.getContent()}">
                                模态框内容..
                            </div>

                            <!-- 模态框底部 -->
                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
                            </div>

                        </div>
                    </div>
                </div>

                <a th:href="@{'/back/article/edit/'+${article.getId()}}">
                    <button type="button" class="btn btn-primary">修改</button>
                </a>
                <button type="button" class="btn btn-danger" th:onclick="deleteArtcile([[${article.getId()}]])">删除</button>
            </td>
        </tr>
        </tbody>
    </table>

</div>
</body>
<script>
    function deleteArtcile(id){
        if (confirm("确认删除？")){
            location.replace(location.protocol+"//"+location.host+"/back/article/delete/"+id);
        }
    }
</script>
</html>